<template>
  <div class="My_mes">
    <div class="mes_left">
      <h3><i class="el-icon-message-solid"></i>消息中心</h3>
      <ul>
        <li
          v-for="(nav, i) in mesNav"
          :key="i"
          :class="i == clickNav ? 'click_nav' : ''"
          @click="cNav(i)"
        >
          {{ nav.btnName }}
        </li>
      </ul>
    </div>
    <div class="mes_right">
      <div class="mes_title">{{ mesNav[clickNav].btnName }}</div>
      <div class="mes_list" v-if="mesList.length == 0">暂无消息！</div>
      <!-- 互动消息 -->
      <ul class="mes_list" v-if="clickNav == 0">
        <li v-for="list in mesList" :key="list.w_id">
          <div class="mes_photo">
            <img src="../../assets/img/logo.png" alt="" />
            <span>{{ list.w_name }}</span>
          </div>
          <div class="mes_main">
            <p class="comment_me">
              {{ list.w_main }}
            </p>
            <div>
              时间：{{ list.w_time
              }}<span
                class="click"
                @click="openLeaveWord(list.u_id, list.u_type)"
                >回复</span
              ><span class="click">删除</span>
            </div>
          </div>
          <div class="my_comment"></div>
        </li>
      </ul>
      <!-- 评论回复 -->
      <ul class="mes_list" v-if="clickNav == 1">
        <li v-for="list in mesList" :key="list.w_id">
          <div class="mes_photo">
            <img src="../../assets/img/logo.png" alt="" />
            <span>{{ list.w_name }}</span>
          </div>
          <div class="mes_main">
            <p class="comment_me">
              {{ list.w_main }}
            </p>
            <div>
              时间：{{ list.w_time
              }}<span
                class="click"
                @click="openLeaveWord(list.u_id, list.u_type)"
                >回复</span
              ><span class="click">删除</span>
            </div>
          </div>
          <div class="my_comment">
            <p>{{ list.w_toMain }}</p>
          </div>
        </li>
      </ul>
      <!-- 系统通知 -->
      <ul class="mes_list" v-if="clickNav == 2">
        <li v-for="list in mesList" :key="list.id">
          <div class="mes_photo">
            <img src="../../assets/img/logo.png" alt="" />
            <span>系统消息</span>
          </div>
          <div class="mes_main">
            <p class="comment_me">
              {{ list.system_inf }}
            </p>
            <div>时间：{{ list.time }}<span class="click">删除</span></div>
          </div>
          <div class="my_comment"></div>
        </li>
      </ul>
      <!-- 老师通知 -->
      <ul class="mes_list" v-if="clickNav == 3">
        <li v-for="list in mesList" :key="list.w_id">
          <div class="mes_photo">
            <img src="../../assets/img/logo.png" alt="" />
            <span>{{ list.w_name }}</span>
          </div>
          <div class="mes_main">
            <p class="comment_me">
              {{ list.w_main }}
            </p>
            <div>
              时间：{{ list.w_time
              }}<span
                class="click"
                @click="openLeaveWord(list.u_id, list.u_type)"
                >回复</span
              ><span class="click">删除</span>
            </div>
          </div>
          <div class="my_comment"></div>
        </li>
      </ul>
      <!-- 审批通知 -->
      <ul class="mes_list" v-if="clickNav == 4">
        <li v-for="list in mesList" :key="list.al_id">
          <div class="mes_photo">
            <img src="../../assets/img/logo.png" alt="" />
            <span>{{ list.e_name }}</span>
          </div>
          <div class="mes_main">
            <p class="comment_me">
              {{ list.al_main }}
            </p>
            <div>时间：{{ list.al_time }}<span class="click">删除</span></div>
          </div>
          <div class="my_comment">
            <p>{{ list.p_title }}</p>
          </div>
        </li>
      </ul>
      <!-- 队伍通知 -->
      <ul class="mes_list" v-if="clickNav == 5">
        <li v-for="list in mesList" :key="list.id">
          <div class="mes_photo">
            <img src="../../assets/img/logo.png" alt="" />
            <span>{{ list.tl_name }}</span>
          </div>
          <div class="mes_main">
            <p class="comment_me">
              {{ list.tl_main }}
            </p>
            <div>时间：{{ list.tl_time }}<span class="click">删除</span></div>
          </div>
          <div class="my_comment"></div>
        </li>
      </ul>
    </div>
    <el-dialog title="写留言" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="留言">
          <el-input v-model="form.leaveWord" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelWriteLeaveWord">取 消</el-button>
        <el-button type="primary" @click="writeLeaveWord()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      mesNav: [
        { btnName: "互动信息", btnFun: this.getInteractinf },
        { btnName: "评论回复", btnFun: this.getReplyinf },
        { btnName: "系统通知", btnFun: this.getSysteminf },
        { btnName: "老师通知", btnFun: this.getTeacherinf },
        { btnName: "审批通知", btnFun: this.getApplyinf },
        { btnName: "队伍消息", btnFun: this.getTeaminf },
      ],
      clickNav: 0,
      mesList: [],
      user_id: "",
      dialogFormVisible: false,
      leaveWordTo: -1,
      leaveWordToType: 0,
      form: {
        leaveWord: "",
      },
    };
  },
  name: "MyMes",
  mounted() {
    var token = localStorage.getItem("token");
    this.user_id = token.substring(1, token.length - 1).split("#")[1] * 1;
    this.getInteractinf();
  },
  methods: {
    cNav(num) {
      this.clickNav = num;
      this.mesNav[num].btnFun();
    },
    getInteractinf() {
      axios
        .post(`http://localhost:3000/information/getInteractinf`, {
          user_id: this.user_id,
          user_type: 1,
        })
        .then((ret) => {
          this.mesList = ret.data.InteractInfList;
        });
    },
    getReplyinf() {
      axios
        .post(`http://localhost:3000/information/getReplyInf`, {
          user_id: this.user_id,
          user_type: 1,
        })
        .then((ret) => {
          this.mesList = ret.data.replyList;
        });
    },
    getSysteminf() {
      axios
        .post(`http://localhost:3000/information/getSystemInf`, {})
        .then((ret) => {
          this.mesList = ret.data.SystemInfList;
        });
    },
    getTeacherinf() {
      axios
        .post(`http://localhost:3000/information/getTeacherInf`, {
          user_id: this.user_id,
        })
        .then((ret) => {
          this.mesList = ret.data.teacherInfList;
        });
    },
    getApplyinf() {
      axios
        .post(`http://localhost:3000/information/getApplyInf`, {
          user_id: this.user_id,
          user_type: 1,
        })
        .then((ret) => {
          this.mesList = ret.data.ApplyInfList;
        });
    },
    getTeaminf() {
      axios
        .post(`http://localhost:3000/information/getTeamInf`, {
          s_id: this.user_id,
        })
        .then((ret) => {
          if (ret.data.code == 1) {
            this.mesList = ret.data.teamInfList;
          } else {
            this.mesList = [];
          }
        });
    },
    //回复消息
    cancelWriteLeaveWord() {
      this.dialogFormVisible = false;
      this.form.leaveWord = "";
    },
    openLeaveWord(id, type) {
      this.dialogFormVisible = true;
      this.leaveWordTo = id;
      this.leaveWordToType = type;
    },
    writeLeaveWord() {
      if (this.form.leaveWord == "") {
        this.$message({
          showClose: true,
          message: "留言不能为空！！",
          type: "error",
        });
      } else {
        var token = localStorage.getItem("token");
        var u_id = token.substring(1, token.length - 1).split("#")[1] * 1;
        var w_time = new Date().toLocaleString();
        axios
          .post(`http://localhost:3000/student/writeLeaveWord`, {
            u_id,
            w_main: this.form.leaveWord,
            w_time,
            w_type: 3,
            w_to: this.leaveWordTo,
            to_type: this.leaveWordToType,
          })
          .then((ret1) => {
            if (ret1.data.code == 1) {
              axios
                .post(`http://localhost:3000/information/addMes`, {
                  user_id: this.leaveWordTo,
                  user_type: this.leaveWordToType,
                })
                .then((ret2) => {
                  if (ret2.data.code == 1) {
                    this.$message({
                      showClose: true,
                      message: "留言成功",
                      type: "success",
                    });
                    this.cancelWriteLeaveWord();
                  }
                });
            }
          });
      }
    },
  },
};
</script>

<style scoped>
.My_mes {
  width: 90%;
  height: 100%;
  margin: auto;
  display: flex;
  background-color: rgba(255, 255, 255, 0.2);
}
.mes_left {
  width: 200px;
  margin: 0 20px;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8);
}
.mes_left > h3 {
  padding: 20px;
  font-size: 18px;
  font-weight: 700;
  border-bottom: 1px solid #909399;
}
.mes_left ul > li {
  height: 24px;
  font: 18x/24px "";
  margin: 20px;
}
.mes_right {
  width: 75%;
  padding: 10px;
}
.mes_title {
  height: 40px;
  padding-left: 10px;
  margin-bottom: 10px;
  font: 18px/40px "";
  border-radius: 5px;
  background-color: #fff;
}
.mes_list {
  height: 91%;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 10px 20px;
  overflow-y: scroll;
  background-color: #fff;
}
.mes_list > li {
  display: flex;
  margin: 30px 0;
  justify-content: space-between;
}
.mes_main {
  width: 75%;
  color: #606266;
  padding-bottom: 30px;
  border-bottom: 1px solid #dcdfe6;
}
.mes_main > div {
  font-size: 12px;
  color: #909399;
}
.mes_main > div > span {
  margin: 0 10px;
  padding: 3px 10px;
  border-radius: 20px;
  color: white;
  background-color: #409eff;
}
.mes_main > div > span:last-of-type {
  background-color: #f56c6c;
}
.comment_me {
  width: 80%;
  margin-bottom: 20px;
  text-indent: 2em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.my_comment {
  width: 100px;
  height: 100%;
  font-size: 14px;
  color: #909399;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mes_photo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mes_photo > span {
  font-weight: 700;
  color: #303133;
}
.mes_photo > img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #409eff;
}
.mes_left > ul > li {
  cursor: pointer;
}
.click_nav {
  color: #fff;
  border-radius: 10px;
  transition: 0.3s;
  background-color: #409eff;
}
</style>
